.top-menu{
	height: 80rpx;
	padding: 0 35rpx;
	.top-menu-cell{
		width: 120rpx;
		height: 50rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		
		text-align: center;
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #CCCCCC;
		line-height: 50rpx;
	}
	.active{
		background: #1DC691;
		color: #FFFFFF;
	}
}
.scroll-view{
	position:relative;
	height:calc(100vh - 100rpx - var(--status-bar-height) - 80rpx);
	.scroll-all{
		height:calc(100vh - 200rpx - var(--status-bar-height) - 80rpx);
		/*
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		*/
		.data-content{
			padding: 0 30rpx;
			.data-content-date{
				padding: 20rpx 0 10rpx 20rpx;
				
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			.data-content-info{
				background: #FFFFFF;
				border-radius: 10rpx;
				border:2rpx solid #aceed9;
				.content-info-row{
					position: relative;
					min-height: 120rpx;
					.row-head-cell{
						padding-top: 11rpx;
						padding-left: 30rpx;
						/*width: 33.333%;*/
						.head-cell-title{
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #999999;
						}
						.head-cell-describe{
							
							padding-top: 9rpx;
							font-size: 20rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 20rpx;
						}
						.head-cell-value{
							padding-top:15rpx;
							.cell-value-number{
								font-size: 38rpx;
								font-family: 'din',DINAlternate-Bold, DINAlternate;
								font-weight: bold;
							}
							.cell-value-unit{
								padding-top: 14rpx;
								font-size: 20rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #333333;
							}
						}
					}
					.row-content-divider{
						position:absolute;
						top:0;
						left:50%;
						transform: translate(-50%, -50%);
						
						width: 650rpx;
						height: 2rpx;
						background: #F5F5F5;
						border-radius: 3rpx;
					}
					
					.row-content-left{
						padding: 20rpx 20rpx 20rpx 0;
						width: 160rpx;
						.content-left-title{
							padding-left:23rpx;
							.left-title-icon{
								font-size: 40rpx;
								color: #333333;
							}
							.left-title-text{
								padding-left:6rpx;
								font-size: 24rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 600;
								color: #333333;
							}
						}
						
						.content-left-image{
							position: relative;
							/*padding-top: 6rpx;*/
							/*padding-bottom: 10rpx;*/
							width: 120rpx;
							
							.left-image-image{
								position: relative;
								z-index:10;
								width: 120rpx;
								height: 120rpx;
								border-radius: 6rpx;
								/*border:2rpx solid #ffffff;*/
							}
							.left-image-white{
								width: 120rpx;
								height: 120rpx;
								border-radius: 6rpx;
								background: #ffffff;
								
								position: absolute;
								right:-4rpx;
								top:-4rpx;
								z-index: 9;
							}
							.left-image-s{
								width: 120rpx;
								height: 120rpx;
								background: #D2F4E9;
								border-radius: 6rpx;
								position: absolute;
								right:-10rpx;
								top:-10rpx;
								z-index: 8;
							}
							.left-image-size{
								position: absolute;
								right: 0;
								bottom:0;
								z-index: 11;
								width: 30rpx;
								height: 30rpx;
								background: rgba(29,198,145,0.8);
								border-radius: 6rpx 0rpx 6rpx 0rpx;
								
								text-align: center;
								font-size: 24rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
								line-height: 30rpx;
							}
						}
						.content-left-null{
							width: 120rpx;
							height: 120rpx;
							background: #F5F5F5;
							border-radius: 6rpx;
							.left-null-text{
								padding-top:10rpx;
								font-size: 24rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #999999;
							}
						}
					}
					.row-content-right{
						flex: 1;
						padding: 18rpx 0;
						.content-right-title{
							padding-left: 23rpx;
							padding-bottom: 20rpx;
							.right-title-icon{
								font-size: 40rpx;
								color: #333333;
							}
							.right-title-text{
								
								padding-left:6rpx;
								font-size: 24rpx;
								font-family: PingFangSC-Semibold, PingFang SC;
								font-weight: 600;
								color: #333333;
							}
						}
						.content-left-null{
							padding-left: 160rpx;
							.left-null-text{
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
							}
							.left-null-a{
								padding-left: 20rpx;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #1DC691;
								text-decoration: underline;
							}
						}
						.content-food-row{
							padding-left: 30rpx;
							height:54rpx;
							.food-row-title{
								.right-title-icon{
									width: 20rpx;
									height: 20rpx;
									background: #1DC691;
									border-radius: 50%;
								}
								.right-title-text{
									/*
									width: 240rpx;
									white-space: nowrap; 
									overflow: hidden; 
									text-overflow: ellipsis; 
									*/
									max-width: 230rpx;
									white-space: nowrap;
									overflow: hidden; 
									text-overflow: ellipsis; 
									
									padding-left:20rpx;
									
									font-size: 24rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									color: #333333;
								}
								.right-title-weight{
									font-size: 24rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									color: #999999;
								}
							}
							.food-row-param{
								padding-right: 24rpx;
								
								.row-param-heat{
									text-align: right;
									font-size: 24rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									color: #333333;
								}
							}
						}
						.content-weight-row{
							padding-left:30rpx;
							.weight-row-top{
								/*padding-right: 24rpx;*/
								.row-top-text{
									font-size: 24rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									color: #666666;
								}
								.row-top-number{
									padding: 0 8rpx;
									font-size: 40rpx;
									font-family: 'din',DINAlternate-Bold, DINAlternate;
									font-weight: bold;
									color: #333333;
								}
							}
							.weight-row-below{
								padding-right: 6rpx;
								.row-below-title{
									padding-right: 25rpx;
									.below-title-text{
										font-size: 24rpx;
										font-family: PingFangSC, PingFang SC;
										font-weight: 400;
										color: #666666;
									}
									.below-title-value{
										.title-value-number{
											font-size: 30rpx;
											font-family: PingFangSC, PingFang SC;
											font-weight: bold;
											color: #333333;
										}
										.title-value-unit{
											font-size: 20rpx;
											font-family: PingFangSC, PingFang SC;
											font-weight: 400;
											color: #333333;
										}
									}
								}
								.row-below-progress{
									padding-top: 40rpx;
									flex: 1;
									.progress-bottom{
										position: relative;
										height: 20rpx;
										background: #CDFAED;
										border-radius: 10rpx;
										.progress-complete{
											height: 20rpx;
											background: linear-gradient(90deg, #E0FDF6 0%, #26E2A6 100%);
											box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(23,140,103,0.3);
											border-radius: 15rpx;
											border: 2rpx solid #FFFFFF;
										}
										.progress-indicate{
											width: 38rpx;
											height: 30rpx;
											position:absolute;
											top: -8rpx;
											transform: translateX(-50%);
										}
										.progress-indicate-number{
											width: 60rpx;
											position:absolute;
											left:50%;
											top:-15rpx;
											transform: translate(-50%,-50%);
											
											text-align: center;
											font-size: 20rpx;
											font-family: PingFangSC, PingFang SC;
											font-weight: 500;
											color: #1DC691;
										}
									}
								}
							}
							.weight-row-contrast{
								padding-top:6rpx;
								
								text-align: center;
								font-size: 22rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #999999;
							}
						}
						.content-drinking-row{
							padding-left: 20rpx;
							padding-right: 63rpx;
							.drinking-row-top{
								.row-top-value{
									font-size: 30rpx;
									font-family: 'din',DINAlternate-Bold, DINAlternate;
									font-weight: 600;
									color: #1DC691;
								}
								.row-top-unit{
									font-size: 24rpx;
									font-family: 'din',DINAlternate-Bold, DINAlternate;
									font-weight: 400;
									color: #333333;
								}
							}
							.drinking-row-below{
								padding-top: 14rpx;
								.row-below-progress{
									width: 468rpx;
									height: 20rpx;
									background: #CDFAED;
									border-radius: 10rpx;
									.progress-bottom{
										border-radius: 6rpx;
										position: relative;
										height: 20rpx;
										background: #F1F1F1;
										padding:0 55rpx;
										/*border-radius: 10rpx;*/
										.progress-complete{
											position:absolute;
											top:0;
											left:0;
											height: 20rpx;
											background: #25E2A6;
											
										}
										.progress-grille{
											width: 4rpx;
											height: 20rpx;
											background: #ffffff;
											position: relative;
											z-index: 10;
										}
										/*
										.progress-indicate{
											width: 38rpx;
											height: 30rpx;
											position:absolute;
											top: -8rpx;
											transform: translateX(-50%);
										}
										*/
									}
								}
							}
						}
					}
				}
			}
			.data-content-null{
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				border:2rpx solid #aceed9;
				.left-null-text{
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
				.left-null-a{
					padding-left: 20rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #1DC691;
					text-decoration: underline;
				}
			}
		}
	}
	.other-tab{
		padding:0 20rpx;
		.top-overview{
			position: relative;
			height: 156rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding-top: 15rpx;
			.top-overview-explain{
				position: absolute;
				top:0;
				right: 0;
				
				width: 120rpx;
				height: 40rpx;
				border-radius: 0rpx 10rpx 0rpx 10rpx;
				
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
			}
			.top-overview-title{
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			.top-overview-value{
				padding-top: 8rpx;
				.overview-value-number{
					font-size: 50rpx;
					font-family: 'din',DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #333333;
				}
				.overview-value-unit{
					padding-left: 2rpx;
					padding-top: 28rpx;
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 20rpx;
				}
			}
			.overview-aimWeight-up{
				width: 100%;
				padding-top:20rpx;
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			.overview-aimWeight-title{
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			.overview-aimWeight-number{
				font-size: 50rpx;
				font-family: 'din',DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #333333;
			}
			.overview-aimWeight-unit{
				padding-top: 24rpx;
				padding-left: 2rpx;
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.weight-row-below{
				width: 100%;
				padding-right: 6rpx;
				.row-below-title{
					padding-right: 25rpx;
					.below-title-text{
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
					.below-title-value{
						.title-value-number{
							font-size: 30rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: bold;
							color: #333333;
						}
						.title-value-unit{
							font-size: 20rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #333333;
						}
					}
				}
				.row-below-progress{
					padding-top: 40rpx;
					flex: 1;
					.progress-bottom{
						position: relative;
						height: 20rpx;
						background: #CDFAED;
						border-radius: 10rpx;
						.progress-complete{
							height: 20rpx;
							background: linear-gradient(90deg, #E0FDF6 0%, #26E2A6 100%);
							box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(23,140,103,0.3);
							border-radius: 15rpx;
							border: 2rpx solid #FFFFFF;
						}
						.progress-indicate{
							width: 38rpx;
							height: 30rpx;
							position:absolute;
							top: -8rpx;
							transform: translateX(-50%);
						}
						.progress-indicate-number{
							width: 60rpx;
							position:absolute;
							left:50%;
							top:-15rpx;
							transform: translate(-50%,-50%);
							
							text-align: center;
							font-size: 20rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #1DC691;
						}
						.progress-indicate-reduce{
							position:absolute;
							top:-30rpx;
							width: 150rpx;
							font-size: 22rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
				}
			}
		}
		.content-piece{
			margin-top: 20rpx;
			
			background: #ffffff;
			border-radius: 10rpx;
			.content-piece-title{
				padding: 0 30rpx;
				height: 100rpx;
				.piece-title-mark{
					width: 6rpx;
					height: 30rpx;
					background: #1DC691;
					border-radius: 3rpx;
				}
				.piece-title-text{
					padding-left: 16rpx;
					font-size: 34rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #333333;
				}
				.piece-title-describe{
					padding-top: 10rpx;
					padding-left: 2rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
				.piece-title-button{
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #1DC691;
				}
			}
			.content-piece-info{
				padding: 0 30rpx;
				.piece-info-row{
					height: 80rpx;
					.info-row-title{
						width: 25%;
						text-align: center;
						
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
					.info-row-date{
						width: 25%;
						text-align: left;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
					.info-row-value{
						width: 25%;
						.row-value-number{
							font-size: 28rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #333333;
						}
						.row-value-unit{
							padding-top: 4rpx;
							font-size: 20rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #333333;
						}
						.row-value-explain{
							width: 120rpx;
							height: 40rpx;
							border-radius: 6rpx;
							
							text-align: center;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							line-height: 40rpx;
						}
					}
					.info-row-sports{
						.row-sports-name{
							width: 120rpx;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #333333;
							overflow: hidden;  
							text-overflow: ellipsis;  
							white-space: nowrap; 
						}
						.row-sports-time{
							padding-left: 10rpx;
							width: 110rpx;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
					.info-row-aimWeight{
						text-align: center;
						width: 110rpx;
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #333333;
					}
					.info-row-image{
						width: 40rpx;
					}
					.info-row-tip{
						width: 70rpx;
						height: 40rpx;
						border-radius: 6rpx;
						
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						line-height: 40rpx;
					}
				}
			}
		}
	}
}
